﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>存货档案</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-table.js"></script>
    <script src="~/scripts/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        function initTable() {
            $("#table").bootstrapTable('destroy');
            $("#table").bootstrapTable({
                columns: [
                    { checkbox: true, visible: true },
                    { field: 'ID', title: 'ID', sortable: true, align: 'center', valign: 'middle',visible:false},
                    { field: 'invenCode', title: '存货编号', align: 'center', valign: 'middle' },
                    { field: 'invenName', title: '存货名称', align: 'center', valign: 'middle' },
                    { field: 'invenTypeCode', title: '存货分类编号', align: 'center', valign: 'middle' },
                    { field: 'specsModel', title: '规格型号', align: 'center', valign: 'middle' },
                    { field: 'meaUnit', title: '计量单位', align: 'center', valign: 'middle' },
                    { field: 'selPrice', title: '参考售价', align: 'center', valign: 'middle', formatter: function (value, row, index) { return "$ " + value } },
                    { field: 'purPrice', title: '参考进价', align: 'center', valign: 'middle', formatter: function (value, row, index) { return "$ " + value } },
                    { field: 'smallStockNum', title: '最小库存', align: 'center', valign: 'middle' },
                    { field: 'bigStockNum', title: '最大库存', align: 'center', valign: 'middle' },
                    {
                        field: 'ID',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    },
                ],
                url: '@Url.Action("getInvenRecords", "Record")',
                method: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',//发送到服务器的数据编码类型，适用于post请求
                toolbar: '#toolbar',
                striped: true,
                cache: true,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                sidePagination: 'server',           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],
                search: false,
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                //height: 390,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                //cardView: true,                    //是否显示详细视图
                detailView: false,      //是否显示父子表
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //得到查询参数
                queryParams: function (params) {
                    var temp = {
                        limit: params.limit,//页面大小
                        offset: params.offset,//要跳过的页码
                        sortcolumsname: params.sort,
                        order: params.order,
                        txtNum: $("#txtNum").val(),
                        txtName: $("#txtName").val(),
                        txtTypeNum:$("#txtTypeNum").val()
                    };
                    return temp;
                },
                onDblClickRow: function (row) {
                    var id = row.ID;
                    Edit(id, "editById");
                }
            });
        }
        $(function () {
            initTable();
            $("#btn-search").click(function () {
                $("#table").bootstrapTable("refresh");
            });
            $("#btn-reset").click(function () {
                $("#txtNum").val("");
                $("#txtName").val("");
                $("#txtTypeNum").val("");
                $("#table").bootstrapTable("refresh");
            });
            //模态框关闭时清空数据
            $("body").on("hidden.bs.modal", ".modal", function () {
                $("input,textarea").val("")
            });
        });
        //操作列格式化函数
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"Edit('" + id + "','editById')\" title='编辑'><span class='glyphicon glyphicon-edit'></span></a>";
            result += "&nbsp;&nbsp;<a href='javascript:;' class='btn btn-xs red' onclick=\"Delete('" + id + "','deleteById')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
            return result;
        }
        //新增
        $(function () {
            $("#btn-add").click(function () {
                $("#EmsModal_Create").modal("show");
            });
            $("#EmsModal_Create #operateModal_Create-btn").off("click").on("click", function () {
                var addArray = new Array();
                var arrays = {};
                arrays.invenCode = $("#EmsModal_Create #invenCode").val();
                arrays.invenName = $("#EmsModal_Create #invenName").val();
                arrays.invenTypeCode = $("#EmsModal_Create #invenTypeCode").val();
                arrays.specsModel = $("#EmsModal_Create #specsModel").val();
                arrays.meaUnit = $("#EmsModal_Create #meaUnit").val();
                arrays.selPrice = $("#EmsModal_Create #selPrice").val();
                arrays.purPrice = $("#EmsModal_Create #purPrice").val();
                arrays.smallStockNum = $("#EmsModal_Create #smallStockNum").val();
                arrays.bigStockNum = $("#EmsModal_Create #bigStockNum").val();
                addArray.push(arrays);
                Info("亲，该模块不可以修改哦(⊙o⊙)");
                //$.ajax({
                //    url: "/Record/Inven_add",
                //    type: "post",
                //    data: {
                //        "addArray":JSON.stringify(addArray)
                //    },
                //    dataType: "json",
                //    success: function (data) {
                //        if (data == "isok") {
                //            Info("添加成功!");
                //            $("#EmsModal_Create").modal("hide");
                //            $("#table").bootstrapTable('refresh');
                //        }
                //    }
                //});
            });
        });
        //修改
        function Edit(id, action) {
            switch (action) {
                case "editByButton":
                    var opts = $("#table").bootstrapTable("getSelections");
                    if (opts.length != 1) {
                        Info("请选择有效记录");
                    } else {
                        $("#EmsModal_Edit #ID").val(opts[0].ID)
                        $("#EmsModal_Edit #invenCode").val(opts[0].invenCode);
                        $("#EmsModal_Edit #invenName").val(opts[0].invenName);
                        $("#EmsModal_Edit #invenTypeCode").val(opts[0].invenTypeCode);
                        $("#EmsModal_Edit #specsModel").val(opts[0].specsModel);
                        $("#EmsModal_Edit #meaUnit").val(opts[0].meaUnit);
                        $("#EmsModal_Edit #purPrice").val(opts[0].purPrice);
                        $("#EmsModal_Edit #selPrice").val(opts[0].selPrice);
                        $("#EmsModal_Edit #smallStockNum").val(opts[0].smallStockNum);
                        $("#EmsModal_Edit #bigStockNum").val(opts[0].bigStockNum);
                        $("#EmsModal_Edit").modal("show");
                    }
                    break;
                case "editById":
                    var opts = $("#table").bootstrapTable('getRowByUniqueId', id);
                    $("#EmsModal_Edit #ID").val(opts.ID)
                    $("#EmsModal_Edit #invenCode").val(opts.invenCode);
                    $("#EmsModal_Edit #invenName").val(opts.invenName);
                    $("#EmsModal_Edit #invenTypeCode").val(opts.invenTypeCode);
                    $("#EmsModal_Edit #specsModel").val(opts.specsModel);
                    $("#EmsModal_Edit #meaUnit").val(opts.meaUnit);
                    $("#EmsModal_Edit #purPrice").val(opts.purPrice);
                    $("#EmsModal_Edit #selPrice").val(opts.selPrice);
                    $("#EmsModal_Edit #smallStockNum").val(opts.smallStockNum);
                    $("#EmsModal_Edit #bigStockNum").val(opts.bigStockNum);
                    $("#EmsModal_Edit").modal("show");
                    break;
            }
            $("#EmsModal_Edit #operateEmsModal_Edit-btn").off("click").on("click", function () {
                var addArray = new Array();
                var arrays = {};
                var ID =parseInt($("#EmsModal_Edit #ID").val(),10);
                arrays.invenCode = $("#EmsModal_Edit #invenCode").val();
                arrays.invenName = $("#EmsModal_Edit #invenName").val();
                arrays.invenTypeCode = $("#EmsModal_Edit #invenTypeCode").val();
                arrays.specsModel = $("#EmsModal_Edit #specsModel").val();
                arrays.meaUnit = $("#EmsModal_Edit #meaUnit").val();
                arrays.selPrice = $("#EmsModal_Edit #selPrice").val();
                arrays.purPrice = $("#EmsModal_Edit #purPrice").val();
                arrays.smallStockNum = $("#EmsModal_Edit #smallStockNum").val();
                arrays.bigStockNum = $("#EmsModal_Edit #bigStockNum").val();
                addArray.push(arrays);
                Info("亲，该模块不可以修改哦(⊙o⊙)");
                //$.ajax({
                //    url: "/Record/Inven_edit",
                //    type: "post",
                //    data: {
                //        "addArray": JSON.stringify(addArray),
                //        "id":ID
                //    },
                //    dataType: "json",
                //    success: function (data) {
                //        if (data == "isok") {
                //            Info("修改成功");
                //            $("#EmsModal_Edit").modal("hide");
                //            $("#table").bootstrapTable('refresh');
                //        }
                //    }
                //});
            });
        }
        //删除
        function Delete(id, action) {
            switch (action) {
                case "deleteByButton":
                    var opts = $("#table").bootstrapTable('getSelections');
                    if (opts == "") {
                        Info("请选择要删除的记录");
                    }
                    else {
                        var idArray = new Array();
                        for (var i = 0; i < opts.length; i++) {
                            idArray.push(opts[i].ID);
                        }
                    }
                break;
                case "deleteById":
                    var opts = $("#table").bootstrapTable('getRowByUniqueId', id);
                    var idArray = new Array();
                    idArray.push(opts.ID);
                    break;
            }
            besure("是否删除所选 "+idArray.length+" 条记录？")
            $("#confirmModal #btn-yes").off("click").on("click", function () {
                $.ajax({
                    url: "/Record/Inven_delete",
                    type: "post",
                    data: {
                        "idArray":idArray
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == "isok") {
                            Info("删除成功");
                            $("#confirmModal").modal("hide");
                            $("#table").bootstrapTable('refresh');
                        }
                    }
                });
            });
        }
        //提示对话框，一框多用
        function Info(message) {
            $("#infoModal #message").text(message);
            $("#infoModal").modal("show");
        }
        //确认对话框
        function besure(message) {
            $("#confirmModal #message").text(message);
            $("#confirmModal").modal("show");
        }
        //页面是否有滚动条
        function isScroll() { return true;};
        //防止页面抖动
        $(function () {
            $(".fade").on("show.bs.modal", function (e) {
                if (isScroll) {
                    $("body").addClass("myModal-open");
                }
            });
            //$(".fade").on("hidden.bs.modal", function (e) {
            //    $("body").removeClass("myModal-open");
            //});
        });
    </script>
    <style type="text/css">
        .myModal-open{
            overflow-y:scroll;
            padding-right:0 !important;
        }
    </style>
</head>
<body>
    <div style="padding-top:10px;padding-left:15px;padding-right:15px;"> 
        <div class="form-group-sm">
            <div class="col-xs-2">
                <input type="text" id="txtNum" class="form-control" placeholder="存货编号" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtName" class="form-control" placeholder="存货名称" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtTypeNum" class="form-control" placeholder="存货分类编号" />
            </div>
            <button id="btn-search" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  搜索</button>
            <button id="btn-reset" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  重置</button>
        </div>
        <div id="toolbar" class="btn-group-sm">
            <button id="btn-add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
            <button id="btn-edit" onclick="Edit(2, 'editByButton')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
            </button>
            <button id="btn-delete" onclick="Delete(2, 'deleteByButton');" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
            </button>
        </div>
        <table id="table"></table>
    </div>

    <!-- Modal(新增) -->
    <div class="modal fade" id="EmsModal_Create" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="EmsModalLabel"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 添加</h4>
                </div>
                <div class="modal-body" id="EmsModalPreview">
                    <div style="margin-left:25px;">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="invenCode" class="control-label">存货编号:</label>
                                <input type="text" class="form-control" id="invenCode">
                            </div>
                            <div class="form-group" style="margin-left:35px;">
                                <label for="invenName" class="control-label">存货名称:</label>
                                <input type="text" class="form-control" id="invenName">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="invenTypeCode" class="control-label">分类编号:</label>
                                <input type="text" class="form-control" id="invenTypeCode">
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="specsModel" class="control-label">规格型号:</label>
                                <input type="text" class="form-control" id="specsModel">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="meaUnit" class="control-label">计量单位:</label>
                                <select class="form-control" style="width:170px" id="meaUnit">
                                    <option>台</option>
                                    <option>件</option>
                                    <option>其他</option>
                                </select>
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="selPrice" class="control-label">参考售价:</label>
                                <input type="text" class="form-control" id="selPrice" placeholder="$">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="smallStockNum" class="control-label">最小库存:</label>
                                <input type="text" class="form-control" id="smallStockNum">
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="purPrice" class="control-label">参考进价:</label>
                                <input type="text" class="form-control" id="purPrice" placeholder="$">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="bigStockNum" class="control-label">最大库存:</label>
                                <input type="text" class="form-control" id="bigStockNum">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="operateModal_Create-btn" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal(修改) -->
    <div class="modal fade" id="EmsModal_Edit" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> 修改</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-left:25px;">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="invenCode" class="control-label">存货编号:</label>
                                <input type="text" class="form-control" id="invenCode">
                            </div>
                            <div class="form-group" style="margin-left:35px;">
                                <label for="invenName" class="control-label">存货名称:</label>
                                <input type="email" class="form-control" id="invenName">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="invenTypeCode" class="control-label">分类编号:</label>
                                <input type="text" class="form-control" id="invenTypeCode">
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="specsModel" class="control-label">规格型号:</label>
                                <input type="email" class="form-control" id="specsModel">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="meaUnit" class="control-label">计量单位:</label>
                                <select class="form-control" style="width:170px" id="meaUnit">
                                    <option>台</option>
                                    <option>件</option>
                                    <option>其他</option>
                                </select>
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="selPrice" class="control-label">参考售价:</label>
                                <input type="email" class="form-control" id="selPrice" placeholder="$">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="smallStockNum" class="control-label">最小库存:</label>
                                <input type="email" class="form-control" id="smallStockNum">
                            </div>
                            <div class="form-group" style="margin-left:35px;margin-top:20px;">
                                <label for="purPrice" class="control-label">参考进价:</label>
                                <input type="email" class="form-control" id="purPrice" placeholder="$">
                            </div>
                            <div class="form-group" style="margin-top:20px;">
                                <label for="bigStockNum" class="control-label">最大库存:</label>
                                <input type="email" class="form-control" id="bigStockNum">
                            </div>
                                <input type="hidden" class="form-control" id="ID" >
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="operateEmsModal_Edit-btn" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal(消息提示框) -->
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color:white;"></span> 提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal(提示是否确认)-->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" data-dismiss="modal" class="btn btn-default" style="position:absolute;right:75px;bottom:3px;" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 否</button>
                    <button type="button" id="btn-yes" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" ><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 是</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
